<template>
  <div class="top">
    <ChatContent :showCursor="showCursor" :content="content"></ChatContent>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ChatContent from "./ChatContent.vue";

const markdown = `实现AJAX有两种方式：

1、XHR
2、fetch api

其中，**XHR**的实现方案是：

\`\`\`js
const xhr = new XMLHttpRequest(),
// ...
\`\`\`

而**fetch api**的实现方案是：

\`\`\`js
fetch(options)
//...
\`\`\``;

const content = ref("");
const showCursor = ref(true);
let index = 0;
let timerId = setInterval(() => {
  if (index >= markdown.length) {
    clearInterval(timerId);
    showCursor.value = false;
    return;
  }
  content.value += markdown[index++];
}, 100);
</script>

<style lang="scss" scoped></style>
